<!-- 免费注册页 -->
<template>
  <view class="registerPage screen-width">
    <navBar :title="`免费注册`" />
    <view class="register_main">
      <view class="main_item">
        <input type="text" name id placeholder="请输入手机号码" v-model="dataList.phoneNumber" />
      </view>
      <!-- <view class="main_item">
        <input type="text" name id placeholder="请输入短信验证码" v-model="dataList.code" maxlength="6" />
        <text @tap="getCode" v-show="isShow">获取验证码</text>
        <text v-show="!isShow">{{ val }}后重发</text>
      </view> -->
	  <view class="main_item">
	    <input type="text" name id placeholder="请输入验证码" v-model="dataList.code" maxlength="6" />
	    <img :src="captchaImg" @click="getCaptchaCode" />
	  </view>
      <view class="main_item">
        <input type="text" name id v-model="cipherCode1" placeholder="请输入新密码" />
      </view>
      <view class="main_item">
        <input type="text" name id placeholder="再次输入新密码" v-model="cipherCode2" />
      </view>
      <view class="main_btn" @tap="submitForm">提交</view>
    </view>
    <Festival></Festival>
  </view>
</template>

<script>
import navBar from "../../components/topBar.vue";
import { isMobile } from "../../util/validator.js";
export default {
  components: {
    navBar
  },
  data() {
    return {
      dataList: {
        phoneNumber: "", // 手机号码
        code: "", // 短信验证码
		codeKey: ""
      },
      cipherCode1: "", // 新密码
      cipherCode2: "", // 再次密码
      val: 60, // 倒计时
      isShow: true,
	  captchaImg: "",

    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 获取验证码
    getCode() {
      if (!isMobile(this.dataList.phoneNumber)) {
        uni.showToast({
          title: "请输入正确的手机号码",
          duration: 2000,
          icon: "none"
        });
        return;
      }
      let data = {
        phoneNumber: this.dataList.phoneNumber,
        type: "Register"
      };
      this.$get("/bmj-api/api/ums/umsUsers/sendVerificationCode", data).then(
        res => {
          // console.log(res)
          if (res.code == 200) {
            this.isShow = false;
            uni.showToast({
              title: "验证码已发送您手机,请查收",
              duration: 2000,
              icon: "none"
            });
            let timeId = setInterval(() => {
              this.val--;
              if (this.val == 0) {
                this.val = 60;
                this.isShow = true;
                clearInterval(timeId);
              }
            }, 2000);
          } else {
            uni.showToast({
              title: res.message,
              duration: 2000,
              icon: "none"
            });
          }
        }
      );
    },
	// 获取图形验证码
    getCaptchaCode() {
      this.$get(
        "/api/ums/umsUsers/sendCaptchaCode?phoneNumber=" +
        this.dataList.codeKey
      ).then(res => {
        this.captchaImg = `data:image/jpeg;base64,${res.result.code}`;
      });
    },
    // 点击提交按钮
    submitForm() {
      // 表单中的值验证
      if (!isMobile(this.dataList.phoneNumber)) {
        uni.showToast({
          title: "请输入正确的手机号码",
          duration: 2000,
          icon: "none"
        });
        return;
      } else if (this.dataList.code == "") {
        uni.showToast({
          title: "请输入验证码",
          duration: 2000,
          icon: "none"
        });
        return;
      } else if (this.cipherCode1 == "" || this.cipherCode2 == "") {
        uni.showToast({
          title: "请输入密码",
          duration: 2000,
          icon: "none"
        });
        return;
      }

      if (this.cipherCode1 != this.cipherCode2) {
        // 密码验证
        uni.showToast({
          title: "两次密码不一致,请重新输入",
          duration: 2000,
          icon: "none"
        });
        return;
      }
      let data = {
        phoneNumber: this.dataList.phoneNumber,
        code: this.dataList.code,
        cipherCode: this.cipherCode2,
        openId: "",
		codeKey: this.dataList.codeKey
      };
      // 获取缓存中的openId
      let openId = uni.getStorageSync("openId");
      console.log(555555, openId);
      if (openId) {
        data.openId = openId;
        uni.removeStorageSync("openId");
      }
      this.$post("/bmj-api/api/register", data).then(res => {
        if (res.code == 200) {
          uni.showToast({
            title: "注册成功",
            duration: 2000,
            icon: "none"
          });
          uni.setStorageSync("Mtoken", res.message);
          uni.switchTab({
            url: "/pages/index/index"
          });
        } else {
          uni.showToast({
            title: res.message,
            duration: 2000,
            icon: "none"
          });
        }
      });
    },
	uuidv4() {
	  this.dataList.codeKey =  "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
		(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
	  );
	}
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
	this.uuidv4();
    this.getCaptchaCode();	  
  }
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.registerPage {
  background: #fff;
  .register_main {
    padding: 0 40rpx;
    .main_item {
      display: flex;
      align-items: center;
      height: 120rpx;
      justify-content: space-between;
      input {
        flex: 1;
        font-size: 32rpx;
        &::placeholder {
          color: #c6cad3;
        }
      }
      text {
        padding: 14rpx 16rpx;
        background-color: #e8f3ff;
        color: #1678ff;
      }
    }
    .main_btn {
      margin-top: 80rpx;
      background-color: #1678ff;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
  }
}
</style>
